<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
	<style>
		ul li{
			margin-top: 10px;
		}
		ul li img{
			float: left;
			margin-right: 10px;
			border-radius: 50%;
		}
		ul li p{
			padding-top: 10px;
			margin-bottom: 20px;
		}
		ul>li>div{
			color: #aaa;
		}
		ul li::after{
			content: '';
			clear: both;
			display: block;
		}
	</style>
</head>
<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option>
		<option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
 <div class="bbsList">
            <ul></ul>
        </div>
		
	<script src="js/jquery-3.6.1.js"></script>
	<script>
		$('header span').click(function(){
			$('.post').show()
		})
		
		$('.btn').click(function(){
			let pic = ['img/tou01.jpg',
			'img/tou02.jpg','img/tou03.jpg',
			'img/tou04.jpg',]
			
			let r = Math.floor(Math.random()*4)
			
			let myli = $(
					`<li>
					<img src = "${pic[r]}">
					<p>
					<div>
					所属版块：${$("select").val()}
					</div>
					</p>
					</li>`);

			$('ul').prepend(myli);
			$('.title').val('');
			$('.content').val('');
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth();
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			let second = date.getSeconds();
			let time=year+"-"+month+"-"+day+"-"+hour+"-"+minute+":"+second;
			
			$('.post').hide();
		})
	</script>
	
</body>
</html>